<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app" v-cloak>
    <cpn2></cpn2>
    <cpnfl><cpnfl>
  </div>

<template id="cpnfl">
  <div>
    <h2>组件分离</h2>
    <h2>{{text}}</h2>
  </div>
</template>

  <script src="vue.js"></script>
  <script>
   //注册组件分离组件
   Vue.component(`cpnfl`, {
     template: "#cpnfl",
     //组件内的data必须为函数
     data(){
       return {
         text: "测试文本数据",
       }
     }
    })
    //创建组件构造器对象
    const cpn2 = Vue.extend({
      template: `
      <div>
      <h2>我是组件</h2>
      <h3>组件</h3>
      <cpn0></cpn0>
      </div>
      `,
      components: {
        //cpn0: cpn0,
      }
    })
    //创建并注册组件（全局），参数：(自定义组件标签名,组件对象)
    Vue.component(`cpn0`, {
      template: `
      <div>
      <h2>我是全局组件</h2>
      <h3>全局组件</h3>
      </div>
      `
    })
    //Vue初始化
    app = new Vue({
      //声明要绑定的id
      el: '#app',
      //数据对象 
      data: {

      },
      //methods用于定义方法
      methods: {
      },
      //注册组件（局部），写法：自定义组件标签名:组件对象
      components: {
        cpn2: cpn2,
      }
    })
  </script>
</body>
</html>